<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <title><?php echo sprintf('%s[%s:%s]', $name, $ip, $port);?></title>

    <base href="<?php echo base_url();?>">

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="./style/css/bootstrap.min.css">

    <!-- Custom styles for this template -->

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <![endif]-->
    <!--[if lt IE 9]>
    <script src="./style/js/respond.min.js"></script>
    <script src="./style/js/html5shiv.min.js"></script>
    <![endif]-->
    <style type="text/css">
        h1,h2{
            margin-bottom: 0;
            margin-top: 0;
            /*border: 1px solid red;*/

        }
        .page-header{
            /*border: 1px solid green;*/
            margin-top: 0;
        }
        .panel,.panel-body{
            height: 500px;
        }
        textarea{
            width: 100%;
            max-width: 100%;
            overflow-y: inherit;
            max-height: 100%;
        }
        th,td{
            text-align: center;
        }
        .big-title{
            font-size: larger;
        }
        tr:hover td{
            background-color: #71c171;
            box-shadow: 0px 8px 16px 0px rgba(44,38,44, 0.2);
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="page-header">
            <h1 class="text-center"><?php echo sprintf('%s[%s:%s]', $name, $target_ip, $target_port); ?></h1>
            <span id="port" hidden><?php echo $port; ?></span>
            <span id="sid" hidden><?php echo $sid; ?></span>
            <h2 class="text-center"><?php echo sprintf('节点[%s:%s]', $ip, $port ); ?></h2>
        </div>
        <div class="row">
            <?php if($usetid === '0'):?>
            <div class="col-md-6" style="display: none">
            <?php else: ?>
                <span id="tid" hidden><?php echo $tid; ?></span>
            <div class="col-md-6">
                <h3 class="text-center"><?php echo sprintf('%s[%s]', $template['customer'], $template['name']); ?></h3>
            <?php endif ?>
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div style="height: 20%; padding-right: 17px;">
                            <table class="table table-bordered table-hover table-striped" >
                                <thead>
                                <tr>
                                    <th class="big-title">域</th>
                                    <th class="big-title" colspan="2">长度字段</th>
                                    <th class="big-title" colspan="2">数据字段</th>
                                </tr>
                                <tr>
                                    <th style="width: 10%">#</th>
                                    <th style="width: 20%">类型</th>
                                    <th style="width: 25%">编码</th>
                                    <th style="width: 20%">最大长度</th>
                                    <th style="width: 25%">编码</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                        <div style="height: 80%;overflow-y: scroll;">
                            <table class="table table-bordered table-hover table-striped">
                                <tbody>
                                <?php foreach($template['content'] as $row): ?>
                                <?php if ($row['field'] != 'nil') :?>
                                <tr>
                                    <td style="width: 10%"><?php echo $row['field']; ?></td>
                                    <td style="width: 20%"><?php echo $row['type']; ?></td>
                                    <?php if ($row['type'] == 'fix') :?>
                                    <td style="width: 25%"><?php echo ''; ?></td>
                                    <?php else:?>
                                    <td style="width: 15%"><?php echo $row['len_encode']; ?></td>
                                    <?php endif ?>
                                    <td style="width: 20%"><?php echo $row['data_len']; ?></td>
                                    <td style="width: 25%"><?php echo $row['data_encode']; ?></td>
                                </tr>
                                <?php endif ?>

                                <?php endforeach ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div>
            <?php if($usetid === '0'):?>
            <div class="col-md-6" style="width: 100%">
            <?php else: ?>
                <div class="col-md-6">
            <?php endif ?>
                <h3 class="text-center">监控日志</h3>
                <div class="panel panel-default">

                    <div class="panel-body">
                        <textarea class="form-control" id="log-panel" rows="30" placeholder="日志输出区域,正在监控..." spellcheck="false" wrap="off"></textarea>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="button-monitor" style="text-align: center">
                <button class="btn btn-lg btn-danger stop-monitor" style="display: inline">关闭监控节点</button>
                <button class="btn btn-lg btn-danger delete-monitor" style="display: inline">销毁监控节点</button>
            </div>
        </div>

    </div>

    <!-- Bootstrap core JavaScript
       ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="./style/js/jquery-1.12.3.js"></script>
    <script src="./style/js/bootstrap.min.js"></script>
    <script src="./style/js/modal.js"></script>
    <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script type="text/javascript">
        var wsUrl = "ws://127.0.0.1:9999/node/watching";
        var output;

        function init()
        {
            output = $('#log-panel');
            initWebSocket();
        }

        function initWebSocket()
        {
            websocket = new WebSocket(wsUrl);
            websocket.onopen = function (evt) {
                onOpen(evt);
            };
            websocket.onclose = function (evt) {
                onClose(evt);
            };
            websocket.onmessage = function (evt) {
               onMessage(evt);
            };
            websocket.onerror = function (evt) {
                onError(evt);
            };
        }

        function onOpen(evt) {
            alert('开始连接');
            var port = $('#port').text();

            var json = {
                port:port
            };
            websocket.send(JSON.stringify(json));
        }


        function onClose(evt) {
            alert("已断开连接");
        }

        function onError(evt) {
            alert("error" + evt.data);
        }

        function onMessage(evt) {
            var log = JSON.parse(evt.data);
            if (log['type'] == 'raw'){
                logRaw(log);
            }else if(log['type'] == 'iso'){
                logIso(log);
            }else{
                logError(log);
            }
            var obj = document.getElementById('log-panel');
            obj.scrollTop = obj.scrollHeight;
        }

        function logIso(log) {
            var recv = "";
            if (log.title != undefined){
                recv += 'title:' + log.title + "\n";
            }
            if (log.id != undefined){
                recv += 'id:' + log.id + "\n";
            }
            if (log.error != undefined){
                recv += 'error:' + log.error + "\n";
            }
            if (log.len != undefined){
                recv += 'len:' + log.len + "\n";
            }
            if (log.raw != undefined){
                recv += 'raw:' + log.raw + "\n";
            }
            if (log.iso != undefined){
                recv += log.iso + "\n";
            }
            var split = "-----------------------------------------------------------\n";
            recv += split;
            var old = output.val();
            output.val(old + recv);
        }

        function logRaw(log) {
            var title = 'title:' + log.title + "\n";
            var id = 'id:' + log.id + "\n";
            var len = 'len:' + log.raw_len + "\n";
            var data = 'raw:' + log.raw + "\n";
            var split = "-----------------------------------------------------------\n";
            var old = output.val();
            output.val(old + title + id + len + data + split);
        }

        function logError(log) {
            var title = 'title:' + log.title + "\n";
            var error = 'error:' + log.error + "\n";
            var split = "-----------------------------------------------------------\n";
            var old = output.val();
            output.val(old + title + error + split);
        }
        
        $('.delete-monitor').click(function () {
            var sid = $('#sid').text();
            var tid = $('#tid').text();

            $.ajax({
                type:'post',
                url:'./node/delete_node.html',
                data:{
                    tid:tid,
                    sid:sid
                },
                dataType:'json',
                success:function (result) {
                    if (result.code != '0'){
                        alert(result.msg);
                        return;
                    }
                    alert('销毁节点成功');
                    window.close();
                },
                error:function (xhr, status,msg) {
                    alert(msg);
                }
            });
        });

        $('.stop-monitor').click(function () {
            websocket.close();
        });


        
        

    window.addEventListener('load', init, false);
    </script>
</body>
</html>